<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}

body{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

ul {
	list-style-type: none;
	overflow: hidden;
	background-color: #333;


}

li {
/* 	width:150px; */
/* 	background-color:red; */
	margin-right:1px;
	float: left;
	text-align: center;
}

li a {/*原设计     li a, .dropbtn   相邻选择器多余了*/
	display: inline-block;/*如果没有此句，垂直方向是无法设置的，或者也可以设置成block*/
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/*1所有标记都可以加:hover，表示鼠标放在其上的含义*/
/*2 .dropdown:hover与.dropdown:hover .dropbtn含义是不同的，前者是对本身设置，后者是针对dropdown下的dropbtn进行设置 */
/*3从html代码看，下面的相邻选择器效果看起来是一样的，都是对链接的背景进行设置。但实际上是不一样，前一个是放在链接上，后一个是放在链接的父li上*/
/*4li的宽度与其下的a的宽度不是一回事情，a的宽度是自身文字上加上padding*/
/*5一般情况下，不设置li的宽度，li下的a与其是等宽的，但如果要设置li的宽度，那么就不一样了，a的宽度只是包在自身文字上*/
/*6li不设置宽度，其宽度由其下的a顶起来，所以两者宽度是一样的,鼠标放在li和a上效果相同；而如果li设置宽度，其下的a的宽度就要在自身上找出了（自身文字上加上padding），效果可能就不同了*/
/*7第3点说明实质不一样，但对于本题来说还是一样的，因为本题不设置li的宽度，导致li和a一样宽，所以放在哪上面都是一样的。但有一个不好的结果就是li宽度因文字多少而不同*/
li a:hover, .dropdown:hover .dropbtn {/*原li a:hover, .dropdown:hover .dropbtn*/
 	background-color: #1f75cf; 
/* 	background-color: red; */
}

/*下面的样式是试验，放在li，结果li的背景改变了，试验成功
.dropdown:hover{
background-color: green; 
}*/



.dropdown-content {
	display: none;
 	position: absolute; /*只写定位，不写偏移，就定在原位*/
	background-color: #green;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {/*这是子菜单里的各菜单项的设置*/
	color: white;
	background-color: #1f75cf;
}

.show {
	display: block;
}
</style>
</head>
<body>
	<ul onmouseleave="hideList('dropdown-content')"> <!--掩藏2级菜单方法1：离开ul就将所有2级菜单掩藏起来  -->
		<li class="dropdown">
<!-- 			 不能在下面，使用onmouseleave="hideList('dropdown-content')" 这样做一离开一级菜单，子菜单不见-->
			<a  class="dropbtn" id="a" href="javascript:void(0)"  onmousemove="showList(this)">标题 A</a>
			<div class="dropdown-content" id="dropdown-a">
				<a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a>
			</div>
		</li>
		
		<li class="dropdown">
			<a  class="dropbtn" id="b" href="javascript:void(0)"  onmousemove="showList(this)">标题 B</a>
			<div class="dropdown-content" id="dropdown-b">
				<a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a>
			</div>
		</li>
	</ul>
	
	
<!-- 	javascript设置的关键有2点：第一点：所有的子菜单都有共同的class；第二点：各链接标记要设置id,各子菜单也要设置对应的id -->
	<script type="text/javascript">
		function showList(o) {
			//第1步，将所有的子菜单先掩藏起来
			hideList("dropdown-content");
			
			//第2步，将点击的子菜单显示出，有2种方式，见下
			//方法1
			/*Element.classList是一个只读属性，它返回元素的类名，作为DOMTokenList对象，该元素用于在元素中添加，移除及切换CSS类。*/
			/*toggle ( String [, true | false] ) 切换类名，或添加类名*/
			//document.getElementById("dropdown-" + o.id).classList.toggle("show");
			
			//方法2
			document.getElementById("dropdown-" + o.id).style.display="block";
		}

		function hideList(childmenuclass) {			
			var obj = document.getElementsByClassName(childmenuclass);/*所有的子菜单,dropdown-a和dropdown-b*/

			//方法1
			/*for (var i = 0; i < obj.length; i++) {
				if (obj[i].classList.contains('show')) {
					obj[i].classList.remove('show');
				}

			}*/
			
			//方法2
			for (var i = 0; i < obj.length; i++) {
				if (obj[i].style.display="block") {
					obj[i].style.display="none";
				}

			}
		}

		
		//掩藏2级菜单方法2,点击事件后
		window.onclick = function(e) {
			if (!e.target.matches('.dropbtn')) {//里面是类名
				hideList("dropdown-content");
			}
		}
		
		
		

	</script>
</body>
</html>
